import { PageContainer } from '@ant-design/pro-components';
import {List, message} from 'antd';

import React, {useEffect, useState} from 'react';
import {listInterfaceInfoVoByPageUsingPost} from "@/services/feiapi/interfaceInfoController";


const InterfaceInfoList: React.FC = () => {

  const [loading,setLoading] = useState(true);
  const [total, setTotal] = useState<number>(0);
  const [list, setList] = useState<API.InterfaceInfoVO[]>([]);

  const getInterfaceInfoList = async (current=1,pageSize=5) => {
    setLoading(true);
    try {
      const res = await listInterfaceInfoVoByPageUsingPost({
        current,
        pageSize
      })
      setList(res.data?.records ?? [])
      setTotal(res.data?.total ?? 0)
    } catch (e:any) {
      message.error(e.message);
    }
    setLoading(false);
  }

  useEffect(() => {
    getInterfaceInfoList()
  },[])

  return (
    <PageContainer title={"在线接口开放平台"}>
      <List
        className="接口列表"
        loading={loading}
        itemLayout="horizontal"
        dataSource={list}
        renderItem={(item) => {
          const apiLink = `/user/interface/${item.id}`;
          return(
            <List.Item
              actions={[<a key={item.id} href={apiLink}>查看</a>]}
            >
              <List.Item.Meta
                title={<a href={apiLink}>{item.name}</a>}
                description={item.description}
              />
            </List.Item>
          )
        }}
        pagination={{
          // eslint-disable-next-line @typescript-eslint/no-shadow
          showTotal(total: number) {
            return '总数：' + total;
          },
          pageSize: 5,
          total,
          onChange(page, pageSize) {
            getInterfaceInfoList(page, pageSize);
          },
        }}
      />
    </PageContainer>
  );
};

export default InterfaceInfoList;
